<template>
  <div style="padding:2em">
    <p>小花, 月薪:{{salary}}, 年薪:{{total}}</p>
    <p>年薪:<input v-model="total"/></p>
    <button @click="double">月薪double</button>
  </div>
</template>
<script>
import { ref, computed } from 'vue'
export default {
  setup () {
  
    const salary = ref(1000)
     
    const double = () => {
      salary.value *= 2
      console.log(salary)
    }
    // 定义计算属性: 普通的写法：只使用了get
    // const total = computed(() => {
    //   return stu.salary * 12
    // })

    // 定义计算属性: 高阶的写法：使用了get + set
    // const total = computed(() => salary.value * 12)
    const total = computed({
        get () {
            return salary.value * 12
        },
        set (val) {
            console.log('val', val)
            salary.value = val / 12
        }
    })
    
    return { double, salary, total}
  }
}
</script>